Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持  
  },

  properties: {
    config: {
      type: Array,
      value: [
        {
          width: 120,
          bgColor: '#FF686F',
          text: '删除'
        }
      ],
      
      observer() {
        let config = this.data.config;
        let btn_width = 0;

        config.forEach(item => {
          btn_width += item.width;
        });

        this.setData({
          btnWidth: btn_width
        });
      }
    },

    active: {
      type: Boolean,
      value: false
    },

    key: {
      type: Number,
      value: 0
    },

    params: {
      type: null,
      value: {}
    }
  },
  
  methods: {
    //获取触摸起点
    _touchStart(e) {
      this.StartX = e.changedTouches[0].pageX;
    },

    //获取触摸移动点
    _touchMove(e) {
      let td = this.data;
      this.MoveX = e.changedTouches[0].pageX;

      if (this.StartX - this.MoveX > 60) {
        this.setData({ active: true });
        this.triggerEvent('key', {
          key: td.key,
          params: td.params
        });
        
      } else if (this.MoveX > this.StartX + 60) {
        this.setData({ active: false });
      }
    },

    // 回调方法
    _callback(e) {
      let td = this.data, e_params = e.currentTarget.dataset;

      this.triggerEvent('callback', {
        key: td.key,
        index: e_params.index,        
        params: e_params.params
      });
    }
  }
});